<template>
  <div class='wy-main car-info wei_car-info'>
    <a-form :form="form" @submit="handleSubmit" class="wy-form" >

          <a-form-item v-bind="formItemLayout" label="登录名" extra="长度为6-16个字符，支持字母数字和@符号组成，不能使用空格。">
            <a-input v-decorator="[ 'username', { rules: [ {required: true, message: '登录名格式不正确!', pattern: regAll.regUserName,}]}]" maxLength="20" placeholder="请输入登录名" />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="密码" >
            <a-input disabled v-decorator="['password', { rules: [{required: true,pattern: regAll.regPassword, message: '密码格式不正确!',}],} ]" type="password" placeholder="6-20位英文或字母" @keyup="checkStrength" maxLength='32' />
            <div class="pass-auth">
<!--               <span :class="passGrade!=''?'red':''"></span>
              <span :class="passGrade =='yellow'||passGrade =='green'?'yellow':''"></span>
              <span :class="passGrade=='green'?'green':''"></span>
              <a :class="''+passGrade">{{passGrade==='red'?'低':(passGrade==='yellow'?'中':(passGrade==='green'?'高':''))}}</a> -->
              <span :class="'red'"></span>
              <span :class="'yellow'"></span>
              <span :class="''"></span>
              <a :class="'yellow'">中</a>
            </div>
          </a-form-item>
         <a-form-item v-bind="formItemLayout" label="姓名">
            <a-input v-decorator="['nickName',{rules: [{required: true,pattern: regAll.regName, message: '姓名格式不正确!'}] } ]"  maxLength="48"  placeholder="请输入姓名" />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="性别">
            <a-select  style="width:280px" placeholder='请选择性别' v-decorator="[ 'ssex']" >
             
              <a-select-option key="1" value="1" >男</a-select-option>
              <a-select-option key="2" value="2" >女</a-select-option>
              <a-select-option key="3" value="">保密</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="手机号码">
            <a-input v-decorator="[
                  'mobile',{
                    rules: [{ required: true, validator: checkTel}],
                  }
                ]"  maxLength="13" placeholder="请输入手机号码"/>
            </a-input>
          </a-form-item>
        <a-form-item v-bind="formItemLayout" label="部门">
             <a-tree-select
                :allowClear="true"
                :dropdownStyle="{ maxHeight: '220px', overflow: 'auto' }"
                :treeData="deptList"
                v-model="deptId"
                @change="changeDept">
              </a-tree-select>
          </a-form-item>
           <a-form-item v-bind="formItemLayout" label="角色">
            <a-select  style="width:280px" placeholder='请选择角色' v-decorator="[ 'roleId', { rules: [ {required: true, message: '角色不能为空！',}]}]" >
             <!--  <a-select-option key="1" :value="1">国际新闻</a-select-option>
              <a-select-option key="2" :value="2" >国内新闻</a-select-option>
              <a-select-option key="3" :value="3" >省内新闻</a-select-option>
              <a-select-option key="4" :value="4" >行业焦点</a-select-option> -->
                  <a-select-option v-for="(itme,index) in roleList" :key="index" :value="itme.roleId">
            {{itme.roleName}}
            </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="用户状态">
              <a-radio-group @change="onChange" v-model="value">
              <a-radio :value="1">有效</a-radio>
              <a-radio :value="0">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
      <div class="ant-row ant-form-item">
        <div class="ant-col-4 ant-form-item-label"></div>
        <div class="ant-col-10 ant-form-item-control-wrapper">
          <div class="ant-form-item-control">
            <span class="ant-form-item-children">
              
              <a-button type="primary"  html-type="submit" >
               创建
              </a-button>

        <!--       <a-button @click="cancel()">
                取消
              </a-button> -->
              
            </span>
          </div>
        </div>
      </div>
      
    </a-form>
  </div>
</template>
<script>
  import { environment } from '@/environments/environment'
  import {checkTel, checkTelNum, checkEmail ,regAll} from 'utils/formValidate'
  import {mapState, mapGetters,mapMutations} from 'vuex'
  export default {
    components: {
    },
    data() {
      return {
        regAll:regAll,
        checkTel:checkTel,
        uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
        FileUploadUrl2:environment.FileUploadUrl2,
        loading: false,
        value:1,
        list:[],
        passGrade: '',
        admin1:'',
        disabled:true,
        roleList:[],
        deptList:[],
        deptId:'',
        formItemLayout: {
          labelCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 4
            },
          },
          wrapperCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 12
            },
          },
        },
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created() {
      this.getType(15)
      this.roleSearch()
      this.deptSearch()
    this.admin1 = this.$store.state.account.user.username;
     setTimeout(() => {
        this.form.setFieldsValue({
        password:'1234qwer'
        });
      }, 100);
    },
    watch: {},

    mounted: function() {

    },
    methods: {
      
      // 获取字典类型
      getType(type){
        this.$get('/info/commonDict', {
          dictType: type
        }).then((r) => {
          if(type == 3){
            console.log(r)
          }
          switch(type){
            case 15: this.list = r.data.data.rows; break;
          }
        })
      },
      cancel(){
         this.$emit('cancel');
      },

      // 密码高中低验证
      checkStrength (){ 
        var lv = 0; 
        var val = this.form.getFieldValue('password');
        if (val){
          if(val.match(/[a-z]/g)){lv++;} 
          if(val.match(/[0-9]/g)){lv++;} 
          if(val.match(/(.[^a-z0-9])/g)){lv++;} 
          if(val.length < 6){lv=0;} 
          if(lv > 3){
            lv=3;
          } 
          this.passGrade = (lv === 1?'red':(lv === 2? 'yellow': (lv === 3?'green':'')))
        }

      },
      onChange(e){
        this.value = e.target.value
      },
      changeDept(value){
       // 切换部门
        this.deptId = value
      },
      //查询角色列表
      roleSearch(){
        this.$get('/role/open/getSystemUserRole/', {},true).then((r) => {
          if(r.status == 200){
            this.roleList = r.data.data
          }else{
            this.$message.error(r.data.message);
          }
          this.loading = false;
        }).catch((e) => {
          this.loading = false;
        })
      },

       //查询部门列表
      deptSearch(){
        this.$get('/dept/', {},true).then((r) => {
          if(r.status == 200){
            this.deptList = r.data.rows.children
            console.log(this.deptList)
          }else{
            this.$message.error(r.data.message);
          }
          this.loading = false;
        }).catch((e) => {
          this.loading = false;
        })
      },

            //认证提交
      handleSubmit(e) {
   
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
          values.status = this.value
          values.deptId = this.deptId
          if(!err) {

                this.$post('/user/addSystemUser', values,true).then((r) => {
                if(r.status == 200){
                  this.$message.success(r.data.message);
                  this.form.resetFields();
                  this.$emit('cancel');
                }else{
                  this.$message.error(r.data.message);
                }
                this.loading = false;
              }).catch((e) => {
                this.loading = false;
              })


            }

        });
      },
    },
    computed: {
    ...mapState(['setUser'])
    },
  }
</script>

<style lang="less" scoped>
         .pass-auth{
            margin-top: 10px;
            span{
                background: #dddddd;
                width: 100px;
                height: 6px;
                display: inline-block;
                margin-right: 10px;
            }
            a{
                color: #dddddd;
                font-size: 18px;
                margin-left: 30px;
            }
            span.red{
                background: #FF2F47;
            }
            span.yellow{
                background: #F5B12E;
            }
            span.green{
                background: #15837A;
            }
            a.red{
                color: #FF2F47;
            }
            a.yellow{
                color: #F5B12E;
            }
            a.green{
                color: #15837A;
            }
        }

</style>